<template>
    <div class="search_box">
        <input class="in" type="text" placeholder="请输入搜索词" />
        <!-- <button class="search-btn"></button> -->
        <button class="search_btn">
            <img src="/src/assets/img/search.png">
        </button>
        
    </div>
</template>

<script setup lang="ts">

</script>

<style>
.search_box {
    /* position: relative; */
    width: 500px;
    margin: 0 auto;
        display: flex;
        justify-content: center;
        /* 水平居中 */
        align-items: center;
        /* 垂直居中 */
        /* width: 550px; */
        height: 50px;
        border: 5px solid black;
        border-radius: 20px;
        background-color: #f2f2f5;
}

.in {
    align-items: center;
    width: 410px;
    height: 35px;
    left: 15px;
    font-size: 20px;
    background-color: transparent;
}
.search_btn{
    right: 2px;
}
.search_btn img{
   height: 55px;
   width: 55px;
}

</style>